<template>
	<view class="acardModalMask" v-if="showModal=='yes'">
		<view :class="['acardModalArea', showModal=='yes' ? 'open' : '']">
			<view class="acardModalCon">
				<view class="acardModalConHeader">{{modalHead}}</view>
				<view v-if="showModalMsg=='yes'" class="acardModalConMain" v-html="modalMsg">{{modalMsg}}</view>
				<slot name="content"></slot>
				<acard-button :info="btnInfo" outerClass="acardModalConButton" @tapButton="doHandleBtn"></acard-button>
				<slot name="extra"></slot>
			</view>
			<block v-if="showDeleteIcon=='show'">
				<image :src="acardModalDelete" class="acardModalDelete" @tap="doHideModal"></image>
			</block>
		</view>
	</view>
</template>

<script>
	import acardButton from './acardButton.vue'
	export default {
		data() {
			return {
				acardModalDelete: 'https://static.myacard.cn/acardModalDelete.png',
			}
		},
		components: {
			acardButton
		},
		props:{
			showModal:{
				type:String,
				default:'no'
			},
			btnInfo:{
				type:String,
				default:'确定'
			},
			modalHead:{
				type:String,
				default:'提示'
			},
			showModalMsg:{
				type:String,
				default:'yes'
			},
			modalMsg:{
				type:String,
				default:''
			},
			//为show显示删除icon 为hide不显示删除icon
			showDeleteIcon:{
				type:String,
				default:'show'
			}
		},
		methods:{
			doHideModal(){
				this.$emit('hideModal');
			},
			doHandleBtn(){
				this.$emit('tapBtn');
			}
		}
	}
</script>

<style lang="less">
	.acardModalMask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		.open {
			animation: slideContentShow 0.3s ease-in both;
		}

		.acardModalArea {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 36upx;
			width: 100%;

			.acardModalCon {
				width: 64.8%;
				background: #ffffff;
				border-radius: 24upx;
				padding: 68upx 52upx 60upx 52upx;
				margin-bottom: 36upx;

				.acardModalConHeader {
					height: 48upx;
					line-height: 48upx;
					color: #333333;
					font-size: 40upx;
					font-weight: 500;
					margin-bottom: 36upx;
				}

				.acardModalConMain {
					line-height: 44upx;
					color: #777777;
					font-size: 32upx;
					margin-bottom: 88upx;
					display: block;

				}

				.acardModalConButton {
					font-size: 30upx !important;
					height: 82upx !important;
					line-height: 82upx !important;
					font-weight: 400 !important;
				}
			}

			.acardModalDelete {
				width: 84upx;
				height: 84upx;
				padding: 0 20upx 20upx 20upx;
			}
		}
	}
</style>
